<template>
  <div id="waiting_lobby_item" class="with_shadow" @click="detail($event)">
    <div class="driver_info row centered">
      <driver-avatar
        class="mr-2"
        :url="value.driverHeadPhoto"
        :text="value.driverTitle"
        :showText="value.driverTitle?value.driverTitle!=''?true:false:false"
      ></driver-avatar>
      <div class="column around" style="flex:1;height: 90%">
        <div class="row">
          <div class="car_model">{{value.driverCar}}</div>
          <div class="evalute row centered">
            <md-icon class="star" name="wf"></md-icon>
            <div class="score">{{value.driverCreditScore}}</div>
          </div>
        </div>
        <div class="driver_phone">{{value.driverNickName}}</div>
      </div>
      <div class="num_order">{{value.driverReceiptNumber}}单</div>
    </div>
    <div class="column mt-2">
      <div class="start_place row centered">
        <svg fill="#3F88EB" class="mr-2" width="12" height="12">
          <circle cx="6" cy="6" r="3" />
        </svg>
        <div class="city_name mr-1">{{value.originCity}}</div>
        <div class="short_address mr-1">{{value.originShortAddress}}</div>
        <div class="distance">{{value.originDistance}}km</div>
      </div>
      <div class="end_place row centered mt-1">
        <svg fill="#FF6917" class="mr-2" width="12" height="12">
          <circle cx="6" cy="6" r="3" />
        </svg>
        <div class="city_name mr-1">{{value.destCity}}</div>
        <div class="short_address mr-1">{{value.destShortAddress}}</div>
        <div class="distance">{{value.destDistance}}km</div>
      </div>
    </div>
    <div class="suitability mt-2 row centered">
      <div>
        <span style="color:#FF6917">{{value.downStreamRatio}}%</span>
        顺路度 {{getReserveTime}}
      </div>
      <div class="has_other_tip ml-2" v-if="value.otherNum?parseInt(value.otherNum)>1?true:false:false">车中有其他人</div>
    </div>
    <div class="divider mt-1"></div>
    <div class="footer row between centered mt-1">
      <div>{{value.status}}</div>
      <md-button class="small_button" @click="detail($event)">邀请接单</md-button>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/wf.svg';
import '@/assets/svgs/star.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import DriverAvatar from '@/components/DriverAvatar';
import { Icon, Button } from 'mand-mobile';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'waiting-lobby-item',
  components: {
    DriverAvatar,
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  created() {
    console.log(this.value);
  },
  methods: {
    invite(event) {
      this.$emit('invite', this.value);
    },
    detail(event) {
      // if (event.target.textContent === '邀请接单') {
      //   return;
      // }
      this.$emit('detail', this.value);
    }
  },
  computed: {
    getReserveTime() {
      let str = '';
      if (this.value) {
        let momstart = moment(this.value.reserveTime, 'x');
        str = momstart.calendar(null, {
          sameDay: '[今天] HH:mm',
          nextDay: '[明天] HH:mm',
          nextWeek: 'dddd HH:mm',
          lastDay: '[昨天] HH:mm',
          lastWeek: '[上] ddd HH:mm',
          sameElse: 'MMMDo HH:mm'
        });
      }
      return str;
    }
  }
};
</script>
<style lang="stylus" scoped>
#waiting_lobby_item {
  height: 358px;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  box-sizing: border-box;
  color: #666;
  font-size: 24px;
  margin-bottom: 20px;

  .driver_info {
    .car_model {
      font-size: 28px;
      font-weight: 400;
      color: #333;
      margin-right: 10px;
    }

    .evalute {
      .star {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }

      .score {
        font-size: 26px;
      }
    }

    .driver_phone {
      margin-top: 10px;
    }

    .num_order {
      font-size: 26px;
      font-weight: 400;
    }
  }

  .suitability {
    font-weight: 400;
    color: #333333;
    line-height: 24px;

    .has_other_tip {
      padding: 0px 10px;
      border-radius: 6px;
      border: 1px solid rgba(224, 224, 224, 1);
      font-size: 20px;
      color: #666666;
      line-height: 36px;
      text-align: center;
      font-weight: normal;
    }
  }

  .place_icon {
    width: 24px;
    height: 24px;
  }

  .divider {
    border-top: 1px solid #E0E0E0;
  }

  .footer {
    .small_button {
      width: 128px;
      height: 44px;
      font-size: 24px;
    }
  }
}
</style>